import { View, Text } from "@tarojs/components";
import { useLoad } from "@tarojs/taro";
import { useState } from "react";
import "./index.less";

interface TabProps {
  tabList: string[];
  onTabClick: (index:number)=> void
}

export default function Index(props:TabProps) {
  const { tabList, onTabClick } = props;
  const [index, setIndex] = useState(0);
  useLoad(() => {
    console.log("Page loaded.");
  });

  return (
    <View className='tab_index'>
      {tabList.map((tabText, key) => {
        return (
          <View
            key={tabText}
            className='tab_item'
            onClick={() => {
              setIndex(key);
              onTabClick(key);
            }}
          >
            <Text className={`${index === key ? "selected" : "text"}`}>
              {tabText}
            </Text>
            {index === key && <View className='line'></View>}
          </View>
        );
      })}
    </View>
  );
}
